// @import './../../../../components/Utility/base.scss';
// $CssTiangleWidth: 200;
// $CssTiangleHeight: $CssTiangleWidth;

// .CssTiangle {
//   height: #{hypotenuse()}px;
//   width: #{$CssTiangleWidth}px;
//   overflow: hidden;
//   position: relative;
//   // background-color: red;
//   &-inner {
//     overflow: hidden;
//     position: absolute;
//     margin-top: -#{1.02 * ($CssTiangleWidth - cos(30deg) * $CssTiangleWidth)}px;
//     top: 50%;
//     left: 50%;
//     height: #{$CssTiangleHeight + 0.88 *
//       ($CssTiangleWidth - cos(30deg) * $CssTiangleWidth)}px;
//     width: #{$CssTiangleWidth + 0.88 *
//       ($CssTiangleWidth - cos(30deg) * $CssTiangleWidth)}px;
//     border-radius: 20%;
//     transform-origin: center;
//     transform: rotate(30deg) skewY(30deg) scaleX(0.866) translate(-50%, 50%);
//     &::before,
//     &::after {
//       content: '';
//       position: absolute;
//       left: 0;
//       width: 100%;
//       height: 100%;
//       background: linear-gradient(#0f0, #03a9f4);
//     }
//     &::before {
//       border-radius: 20% 20% 20% 55%;
//       transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
//         skewX(30deg) scaleY(0.866) translateX(-24%);
//     }
//     &::after {
//       border-radius: 20% 20% 55% 20%;
//       transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
//         skewX(-30deg) scaleY(0.866) translateX(24%);
//     }
//   }
// }
